<script setup lang="ts">
import {ref} from 'vue'
import {getFile} from '@/netForAxios/net'
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled, Document,
  DocumentAdd,
  FolderAdd,
  Plus, Search
} from "@element-plus/icons-vue";

import {uploadFile} from '@/netForAxios/net';

function upload(file) {
  let formData = new FormData();
  formData.append('file', file.raw);
  uploadFile(formData);
}

const fileName = ref('')

function search() {
  if (!fileName.value.trim()) return
  getFile(fileName.value);
}

</script>

<template>
  <div class="container">
    <div class="head">
      <h3>开始</h3>
      <div class="head-buttons">
        <el-dropdown placement="bottom" trigger="click" style="width: 20%;height: 100%">
          <div class="creatDoc">
            <el-icon size="30">
              <DocumentAdd/>
            </el-icon>
            <div class="info"
                 style="display: flex;flex-direction: column">
              <el-text type="primary">新建文档</el-text>
              <el-text size="small" type="info" style="margin-top: 5px">支持 .md .txt格式</el-text>
            </div>
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
              <el-dropdown-item :icon="CirclePlusFilled">
                Action 2
              </el-dropdown-item>
              <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
              <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
              <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button class="creatFolder">
          <el-icon size="30">
            <FolderAdd/>
          </el-icon>
          <div class="info"
               style="display: flex;flex-direction: column">
            <el-text type="primary">新建知识库</el-text>
            <el-text size="small" type="info" style="margin-top: 5px">使用知识库整理知识</el-text>
          </div>
        </el-button>
        <el-upload
            class="uploader"
            accept=".md,.txt"
            :auto-upload="false"
            :on-change="upload"
            :show-file-list="false">
          <div class="upload-area">
            <el-icon size="30">
              <Document/>
            </el-icon>
            <div class="info">
              <el-text type="primary">上传本地文件</el-text>
              <el-text size="small" type="info" style="margin-top: 5px">
                将本地文件存储到云端
              </el-text>
            </div>
          </div>
        </el-upload>
      </div>
    </div>
    <div class="middle">
      <h3>文档</h3>
      <el-input v-model="fileName" size="default" :prefix-icon="Search" placeholder="搜索文件" @keydown.enter="search"
                style="width: 20%"></el-input>
    </div>
  </div>
</template>

<style scoped>

.creatFolder {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  margin-left: 10px;
  border-radius: 10px;
}

.creatFolder :deep(span) {
  display: flex;
  justify-content: center; /* 子元素两端对齐 */
  align-items: center; /* 子元素垂直居中 */
  width: 100%; /* 让 span 充满整个按钮宽度 */
}

/* 穿透组件内部那一层 */
.uploader {
  width: 20%;
  height: 100%;
  display: block;
  margin-left: 10px;
}

.uploader :deep(.el-upload) {
  height: 65%;
  display: block;
}


.upload-area {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(187, 187, 187, 0.55);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-area:hover {
  border-color: var(--el-color-primary);
}

.info {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
  flex: 1;
}

.head-buttons {
  height: 50%;
  display: flex;
  flex-direction: row;
}

.creatDoc {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(187, 187, 187, 0.55);
  display: flex;
  flex-direction: row;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
}

.middle {
  width: 100%;
  height: 85%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.head {
  width: 100%;
  height: 15%;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;

}
</style>